<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>treemap</title>
    <script src="../../build/deps.js"></script>
    <script src="../../deps/seajs/sea.js"></script>
<style type="text/css">
#chart {
    border-top: 1px dashed #F00;
    border-bottom: 1px dashed #F00;
    padding-left: 20px;
}
</style>
  </head>

  <body>
    <div id="hover">hover node info</div>
    <div id="info">click leaf node info</div>
    <div id="chart"></div>

    <script>
    //http://planetozh.com/blog/2008/04/javascript-basename-and-dirname/
    var dir = window.location.href.replace(/\\/g,'/').replace(/\/[^\/]*$/, '');
    seajs.config({
        alias: {
            'DataV': dir + '/../../lib/datav.js',
            'Treemap': dir + '/../../lib/charts/treemap.js'
        }
    });
    </script>
    <script>
    seajs.use(["Treemap", "DataV"], function (Treemap, DataV) {
        DataV.changeTheme("theme0");
        var treemap = new Treemap("chart");
        d3.json("category_ratio.json", function (source) {
            treemap.setSource(source);
            treemap.on("leafNodeClick", function () {
                $("#info").html(this.name + " is a leaf node.");
            });
            treemap.on("hoverIn", function () {
                $("#hover").html("hover " + this.name);
            });
            treemap.on("hoverOut", function () {
                $("#hover").html("leave " + this.name);
            });
            treemap.render();
        });
    });
    </script>

  </body>
</html>
